<template>
  <!-- 下拉菜单组件 -->
  <div class="Menu" v-if="isShow == true">
    <div class="dropdown">
      <div class="userImg">
        <UserImg placeholder="../../public/胡桃.png"></UserImg>
      </div>
      <div class="dropdownItem">
        <div class="img">
          <UserImg placeholder="../../public/胡桃.png"></UserImg>
        </div>
        <div class="name">
          <span>{{ username }}</span>
        </div>
        <hr />
        <p v-for="(item, index) in dropdownList" :key="index" @click="handleItemClick(item)">
          {{ item }}
        </p>
      </div>
    </div>
  </div>
  <!-- 点击登录 -->
  <div class="loginImg" v-if="isShow === false">
    <img @click="ToIndividual" src="https://bbs-static.miyoushe.com/avatar/avatarDefaultPc.png" />
  </div>
</template>

<script setup>
import UserImg from './UserImg.vue'
import { onBeforeMount, ref } from 'vue'
import { getUser } from '../js/getUser.js'
import { useRouter } from 'vue-router'
const props = defineProps({
  dropdownList: Array
})

let isShow = true
const username = ref()
const router = useRouter()
function getUserMessage() {
  const { existsInLocalStorage, user } = getUser('user')
  if (existsInLocalStorage) {
    isShow = true
    username.value = user.username
  } else {
    isShow = false
  }
}

const ToIndividual = () => {
  router.push('/login')
}

function handleItemClick(item) {
  if (item === '退出登录') {
    localStorage.removeItem('user')
    window.location.reload()
  }
}

onBeforeMount(() => {
  getUserMessage()
})
</script>

<style src="./css/DropMenu.scss" lang="scss"></style>
